<template>
  <div>
    <p>
      <!--  刷新按钮  -->
      <button class="btn btn-white btn-default btn-round" @click="list(1)">
        <i class="ace-icon fa fa-refresh"></i>
        刷新
      </button> &nbsp;

      <!--  新增按钮  -->
      <button class="btn btn-white btn-default btn-round" @click="add()">
        <i class="ace-icon fa fa-edit"></i>
        新增
      </button>
    </p>

    <!--  增加分页组件  -->
    <pagination ref="pagination" v-bind:list="list"></pagination>

    <div class="row">
      <div v-for="teacher in teachers" class="col-md-2">
        <div>
          <span class="profile-picture">
            <img v-show="!teacher.image" class="editable img-responsive editable-click editable-empty" src="/static/image/header2.jpg" v-bind:title="teacher.intro"/>
            <img v-show="teacher.image" class="editable img-responsive editable-click editable-empty" v-bind:src="teacher.image" v-bind:title="teacher.intro"/>
          </span>

          <div class="space-4"></div>

          <div class="width-95 label label-info label-xlg arrowed-in arrowed-in-right">
            <div class="inline position-relative">
              <a href="javascript:;" class="user-title-label dropdown-toggle" data-toggle="dropdown">
                <i class="ace-icon fa fa-circle light-green"></i> &nbsp;
                <span class="white">{{ teacher.position }}</span>
              </a>
            </div>
          </div>
        </div>

        <div class="space-6"></div>

        <div class="text-center">
          <a href="javascript:;" class="text-info bigger-110" v-bind:title="teacher.motto">
            <i class="ace-icon fa fa-user"></i>&nbsp;
            {{ teacher.name }}【{{ teacher.nickname }}】
          </a>
        </div>

        <div class="space-6"></div>

        <div class="profile-social-links align-center">
          <button class="btn btn-white btn-xs btn-info btn-round" @click="edit(teacher)">
            <i class="ace-icon fa fa-pencil bigger-160"></i>
            编辑
          </button>&nbsp;

          <button class="btn btn-white btn-xs btn-danger btn-round" @click="del(teacher.id)">
            <i class="ace-icon fa fa-trash-o bigger-160"></i>
            删除
          </button>
        </div>

        <div class="hr hr16 dotted"></div>

      </div>
    </div>

    <!-- PAGE CONTENT BEGINS -->

    <!--  模态框  -->
    <div id="form-modal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">讲师信息</h4>
          </div>
          <!--  模态框主体内容  -->
          <div class="modal-body">

            <!--  模态框中的表单  -->
            <form class="form-horizontal">
              <div class="form-group">
                <label class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                  <input type="text" v-model="teacher.name" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">昵称</label>
                <div class="col-sm-10">
                  <input type="text" v-model="teacher.nickname" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">头像</label>
                <div class="col-sm-10">
                  <big-file v-bind:input-id="'image-upload'"
                        v-bind:text="'上传头像'"
                        v-bind:use="FILE_USE.TEACHER.key"
                        v-bind:suffixs="['jpg', 'jpeg', 'png']"
                        v-bind:after-upload="afterUpload"></big-file>
                  <div v-show="teacher.image" class="row"><br>
                    <div class="col-md-4">
                      <img v-bind:src="teacher.image" class="img-responsive"/>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">职位</label>
                <div class="col-sm-10">
                  <input type="text" v-model="teacher.position" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">座右铭</label>
                <div class="col-sm-10">
                  <input type="text" v-model="teacher.motto" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">简介</label>
                <div class="col-sm-10">
                  <textarea type="text" v-model="teacher.intro" class="form-control" rows="5"/>
                </div>
              </div>
            </form>
          </div>

          <!--  模态框底部内容  -->
          <div class="modal-footer">
            <!--  data-dismiss的作用为关闭模态框的事件  -->
            <button type="button" class="btn btn-white btn-lg btn-danger btn-round" data-dismiss="modal">
              <i class="ace-icon fa fa-times red"></i>
              取消
            </button>
            <button type="button" class="btn btn-white btn-lg btn-info btn-round" @click="save()">
              <i class="ace-icon fa fa-save blue"></i>
              保存
            </button>
          </div>

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- PAGE CONTENT ENDS -->

  </div>


</template>

<script>
import Pagination from "../../components/pagination"
import BigFile from "../../components/big-file"

export default {
  name: "business-teacher",
  components: {BigFile, Pagination},
  mounted: function () {
    let _this = this;
    _this.list(1);
    // 初始化每页显示10条数据
    _this.$refs.pagination.size = 10;

    // 将左侧栏的样式激活
    // this.$parent.activeSidebar("business-teacher-sidebar");
  },
  data: function () {
    return {
      // 用来映射表单的数据
      teacher: {},
      teachers: [],
      FILE_USE: FILE_USE
    }
  },
  methods: {
    list(page) {
      let _this = this;
      // 调用显示延迟框的方法
      Loading.show();
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/teacher/list', {
        page: page,
        size: _this.$refs.pagination.size
      }).then((result) => {
        // 关闭延迟框的显示
        Loading.hide();
        let response = result.data;
        _this.teachers = response.content.list;
        _this.$refs.pagination.render(page, response.content.total);
      })
    },

    // 当点击新增按钮时触发的事件
    add() {
      let _this = this;
      _this.teacher = {};
      $("#form-modal").modal("show");
    },

    // 当点击编辑按钮时触发的事件
    edit(teacher) {
      let _this = this;
      _this.teacher = $.extend({}, teacher);
      $("#form-modal").modal("show");
    },

    // 编辑和新增的调用方法
    save() {
      let _this = this;

      // 保存校验，加1!=1是为了解决第一个||符号的问题
      if (1 != 1
          || !Validator.require(_this.teacher.name, "姓名")
          || !Validator.length(_this.teacher.name, "姓名", 1, 50)
          || !Validator.length(_this.teacher.nickname, "昵称", 1, 50)
          || !Validator.length(_this.teacher.image, "头像", 1, 100)
          || !Validator.length(_this.teacher.position, "职位", 1, 50)
          || !Validator.length(_this.teacher.motto, "座右铭", 1, 50)
          || !Validator.length(_this.teacher.intro, "简介", 1, 500)
      ) {
        return;
      }

      // 调用显示延迟框的方法
      Loading.show();
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/teacher/save', _this.teacher).then((result) => {
        // 关闭延迟框的显示
        Loading.hide();
        // 用response来代替result.data
        let response = result.data;
        if (response.success) {
          $("#form-modal").modal("hide");
          _this.list(1);
          Toast.success("编辑成功！")
        } else {
          Toast.warning(response.message)
        }
      })
    },
    // 删除的调用方法
    del(id) {
      let _this = this;
      Confirm.show("删除后不可恢复，确认删除吗？", function () {
        // 调用显示延迟框的方法
        Loading.show();
        _this.$ajax.delete(process.env.VUE_APP_SERVER + '/business/admin/teacher/delete/' + id).then((result) => {
          let response = result.data;
          // 当删除成功时
          if (response.success) {
            // 刷新列表
            _this.list(1);
            // 调用Toast组件的成功效果
            Toast.success("删除成功！")
          } // end if

        }) // end then
      })
    },

    afterUpload(response) {
      let _this = this;
      _this.teacher.image = response.content.path;
    }
  } // methods
};
</script>

<style scoped>

</style>
